<template>
    <div class="main">
        <el-row>
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center" style="margin-right: 10px;">护士名称</span>
            <el-input v-model="input.name" class="w-50 m-2" placeholder="请输入名称" style="width: 200px;">
                <template #prefix>
                    <el-icon class="el-input__icon">
                        <search />
                    </el-icon>
                </template>
            </el-input>
            <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
                style="margin-right: 10px;margin-left: 10px;">护士科室</span>
            <el-input v-model="input.department" class="w-50 m-2" placeholder="请输入科室" style="width: 200px;">
                <template #prefix>
                    <el-icon class="el-input__icon">
                        <search />
                    </el-icon>
                </template>
            </el-input>
            <el-button :icon="Search" type="primary" @click="oonchang" style="margin-left: 10px;">查询</el-button>
        </el-row>
        <!--  -->
        <div class="but">
            <el-table :data="tableData.list" border style="width: 100%">
                <el-table-column prop="name" label="护士名称" />
                <el-table-column prop="department" label="所属科室" />
                <el-table-column label="护士头像">
                    <template #default="scope">
                        <!-- wertyjk而退哦怕 -->
                        <img :src="scope.row.head" alt="" height="60" width="60">
                        <!-- 1234567i 123456-->
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="联系方式" />
                <el-table-column prop="sex" label="性别" />
            </el-table>
            <el-pagination 
            v-model:current-page="pageoif.page" 
            v-model:page-size="pageoif.size"
                :page-sizes="[10, 20, 50, 100]" :small="true" :disabled="false" :background="true"
                layout="total, sizes, prev, pager, next, jumper,slot"
                #default="条数"
                 :total="tableData.total" 
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect,watch} from 'vue'
import { doctorList_nurse,doctorSearch_nurse } from "@/API/doctor.api"
import { Search } from '@element-plus/icons-vue'


const input = reactive({
    name:"",
    department:""
})
let tableData = reactive({
    list: [],
    total:''
})
const pageoif = reactive({
    page: 1,
    size: 10
})

const listNav = async()=>{
    const ser = await doctorList_nurse(pageoif)
    tableData.list = ser.data.data
    tableData.total = ser.data.total
} 

watchEffect(()=>{
    listNav()
})
//查询
watch([input,pageoif],()=>{
    oonchang() 
})

const emits = defineEmits(['scuuers'])

const oonchang= async()=>{
    let data = {...input,...pageoif}
    emits('scuuers',{data,tableData})
    
    let ser = await doctorSearch_nurse(data)
    tableData.total = ser.data.total
    tableData.list=ser.data.data
}

const handleSizeChange=()=>{}
const handleCurrentChange=()=>{}
</script>

<style scoped lang="scss">
.main {
    padding: 20px 20px;
}

::v-deep .el-row {
    display: flex;
    align-items: center;
}

.but {
    margin-top: 20px;
}
</style>